<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-06-05 14:23:04
 * @LastEditors: william
 * @LastEditTime: 2025-11-10 16:57:46
-->
<template>
  <nw-PageTitle :title="$t('pages.recipe')" :isBorder="false" />
  <nw-PageContainer isTabbar>
    <view class="tabs">
      <view
        v-for="(row, i) in tabList"
        :key="i"
        :class="[
          'tab',
          {
            active: tabCurrent === i
          }
        ]"
        @click="handleTabClick(row, i)"
      >
        <text class="tab-text">{{ row.label }}</text>
      </view>
      <view class="tabs-right" @tap="handleAdd">
        <uni-icons type="plusempty" :size="iconSize" color="#333333" />
      </view>
    </view>
    <swiper class="swiper" :current="tabCurrent" @change="handleSwiperChange">
      <swiper-item>
        <scroll-view
          class="scroll-content"
          scroll-y
          :refresher-enabled="false"
          :refresher-triggered="triggered"
          @refresherrefresh="onRefresh"
          @refresherrestore="onRestore"
          @refresherabort="onAbort"
          @scrolltolower="handleScrolltolower"
        >
          <up-row
            v-if="recipeLibraryList.length"
            class="lists"
            :gutter="rowGutter"
          >
            <up-col span="4" v-for="(row, i) in recipeLibraryList" :key="row">
              <view class="list">
                <view
                  class="list-content"
                  @click="handleContentClick(row)"
                  @longpress="handleRecipeCollect($event, row)"
                >
                  <image
                    :src="row.picturePath"
                    mode="aspectFit"
                    class="recipe-img"
                  />
                  <view
                    :class="[
                      'list-text',
                      {
                        'text-small':
                          row.name.length > 6 && row.name.length <= 12,
                        ellipsis: row.name.length > 12
                      }
                    ]"
                  >
                    {{ row.name }}
                  </view>
                </view>
                <nw-Button
                  :text="$t('pages.cooking')"
                  @click="handleCooking(row)"
                ></nw-Button>
              </view>
            </up-col>
          </up-row>
          <Emptylist v-else />
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view class="scroll-content" scroll-y>
          <view v-if="recipeFormulatingList.length" class="items">
            <view
              class="item"
              v-for="(row, i) in recipeFormulatingList"
              :key="row"
            >
              <image
                :src="row.picturePath"
                mode="aspectFit"
                class="recipe-img"
              />
              <view class="item-content">
                <view class="ic-top">
                  <view class="ic-name">{{ row.name }}</view>
                  <view class="ic-operator">{{ row.nickName }}</view>
                </view>
                <view class="ic-item">
                  <view class="ici-item">
                    <view class="ic-label">口味：</view>
                    <view class="ic-value">
                      {{
                        g_options.getOptionText(
                          recipeTasteOptions,
                          row.tasteStyle,
                          '--'
                        )
                      }}
                    </view>
                  </view>
                  <view class="ici-item">
                    <view class="ic-label">风格：</view>
                    <view class="ic-value">
                      {{
                        g_options.getOptionText(
                          recipeCookStyleOptions,
                          row.cookStyle,
                          '--'
                        )
                      }}
                    </view>
                  </view>
                </view>
                <view class="ic-item">
                  <view class="ici-item">
                    <view class="ic-label">
                      {{
                        g_dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
                      }}
                    </view>
                    <!-- <view class="ic-value" style="margin-left: 8rpx"></view> -->
                  </view>
                  <view class="ici-item">
                    <view class="ic-label">时长：</view>
                    <view class="ic-value">
                      {{ calcDuration(row.stepList) }}
                    </view>
                  </view>
                </view>
              </view>
              <view class="item-right">
                <nw-Button
                  size="small"
                  :text="$t('recipe.resumeAdjust')"
                  @click="handleContentClick(row)"
                ></nw-Button>
              </view>
            </view>
          </view>
          <Emptylist v-else />
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view class="scroll-content" scroll-y>
          <up-row
            v-if="recipeCollectionList.length"
            class="lists"
            :gutter="rowGutter"
          >
            <up-col
              span="4"
              v-for="(row, i) in recipeCollectionList"
              :key="row"
            >
              <view class="list">
                <view
                  class="list-content"
                  @click="handleContentClick(row)"
                  @longpress="handleRecipeCancelCollect($event, row)"
                >
                  <image
                    :src="row.picturePath"
                    mode="aspectFit"
                    class="recipe-img"
                  />
                  <view
                    :class="[
                      'list-text',
                      {
                        'text-small':
                          row.name.length > 6 && row.name.length <= 12,
                        ellipsis: row.name.length > 12
                      }
                    ]"
                  >
                    {{ row.name }}
                  </view>
                </view>
                <nw-Button
                  :text="$t('pages.cooking')"
                  @click="handleCooking(row)"
                ></nw-Button>
              </view>
            </up-col>
          </up-row>
          <Emptylist v-else />
        </scroll-view>
      </swiper-item>
    </swiper>

    <up-toast ref="uToastRef" />
    <UpdateRecipe
      v-if="updateRecipeVisible"
      v-model="updateRecipeVisible"
      @confirm="handleAction"
    />
    <SelectDevice
      v-if="selectDeviceVisible"
      v-model="selectDeviceVisible"
      :row="recipeRow"
      @confirm="handleAction"
    />
  </nw-PageContainer>
  <VoiceControlIcon />
  <nw-Tabbar value="recipe" />
</template>

<script setup>
import UpdateRecipe from './component/UpdateRecipe.vue'
import SelectDevice from './component/SelectDevice.vue'

const props = defineProps({
  tabIndex: {
    type: String,
    default: ''
  }
})

const tabList = reactive([
  {
    label: g_t('recipe.recipeLibrary')
  },
  {
    label: g_t('recipe.modifying')
  },
  {
    label: g_t('recipe.collect')
  }
])
const tabCurrent = ref(0)
const iconSize = ref(g_utils.rpxToPx(22))
const triggered = ref(false)
const rowGutter = ref(g_utils.rpxToPx(16))
const {
  recipeLibraryList,
  recipeFormulatingList,
  recipeTasteOptions,
  recipeCookStyleOptions
} = storeToRefs(useRecipeStore())
const recipeCollectionList = computed(() => {
  return recipeLibraryList.value.filter(item => item.collect * 1 === 1)
})
// 弹框参数
const uToastRef = ref(null)
const updateRecipeVisible = ref(false)
const selectDeviceVisible = ref(false)
const recipeRow = ref('')

onMounted(_ => {
  tabCurrent.value = Number(props.tabIndex || 0)
  g_api.recipe
    .apiProcessDropList({
      username: ''
    })
    .then(({ code, data }) => {
      if (code === 200 && data) {
        //
      }
    })
    .finally(_ => {})
})

const handleTabClick = (row, i) => {
  // console.log('handleTabClick', row, i)
  tabCurrent.value = i
}

const handleAdd = _ => {
  updateRecipeVisible.value = true
}

const handleSwiperChange = e => {
  console.log('handleSwiperChange', e)
  tabCurrent.value = e.detail.current
}

const onRefresh = e => {
  console.log('onRefresh', e)
  triggered.value = true
  setTimeout(() => {
    triggered.value = false
  }, 1000)
}

const onRestore = _ => {
  console.log('onRestore')
  triggered.value = 'restore'
}

const onAbort = _ => {
  console.log('onAbort', e)
}

const handleScrolltolower = e => {
  console.log('handleScrolltolower', e)
}

const handleContentClick = row => {
  console.log('handleContentClick', row)
  uni.navigateTo({
    url: `/pages/recipe/detail?type=edit&id=${row.id}&recipeType=${tabCurrent.value}`
  })
}

const handleRecipeCollect = (e, row) => {
  console.log('handleRecipeCollect', row)
  e.preventDefault()
  const foundRecipe = recipeLibraryList.value.find(
    item => item.id === row.id && item.collect === 0
  )
  if (foundRecipe) {
    foundRecipe.collect = 1
    uToastRef.value.show({
      type: 'success',
      message: `该菜谱【${row.name}】已收藏`
    })
  }
}

const handleRecipeCancelCollect = (e, row) => {
  console.log('handleRecipeCancelCollect', row)
  e.preventDefault()
  const foundRecipe = recipeLibraryList.value.find(
    item => item.id === row.id && item.collect === 1
  )
  if (foundRecipe) {
    foundRecipe.collect = 0
    uToastRef.value.show({
      type: 'success',
      message: `该菜谱【${row.name}】取消收藏成功`
    })
  }
}

const handleCooking = row => {
  console.log('handleCooking', row)
  selectDeviceVisible.value = true
  recipeRow.value = row
}

const calcDuration = stepList => {
  const seconds = stepList.reduce((sum, item) => sum + item.timeOffset * 1, 0)
  return g_dayjs.duration(seconds, 'seconds').format('mm:ss')
}

const handleAction = data => {
  console.log('handleAction', data)
  uni.navigateTo({
    url: '/pages/cooking/index'
  })
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.tabs {
  position: relative;
  width: 100%;
  height: 58rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 42rpx;
  background-color: var(--bg-color);
  box-sizing: border-box;
  box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
  .tab {
    position: relative;
    display: flex;
    align-items: center;
    padding: 18rpx 0;
    .tab-text {
      height: 22rpx;
      line-height: 22rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: var(--color-333);
    }
    &.active {
      .tab-text {
        font-weight: bold;
      }
      &::after {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        display: block;
        content: '';
        width: 100%;
        height: 4rpx;
        padding: 0 14rpx;
        background-color: var(--main-theme);
      }
    }
  }
  .tabs-right {
    position: absolute;
    right: 10rpx;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 10rpx;
    box-sizing: border-box;
  }
}

.swiper {
  height: 100%;
  box-sizing: border-box;
  .scroll-content {
    height: 100%;
    max-height: 100%;
    .recipe-img {
      display: block;
      width: 224rpx;
      height: 162rpx;
      background-color: var(--body-theme);
    }
  }
}

.lists {
  flex-wrap: wrap;
  align-items: stretch !important; /* 强制子元素拉伸至相同高度 */
  padding: 20rpx;
  .u-col:nth-of-type(n + 4) {
    margin-top: 18rpx;
  }
  .list {
    height: 100%;
    background-color: var(--bg-color);
    border-radius: 12rpx;
    overflow: hidden;
    box-sizing: border-box;

    .list-text {
      height: 20rpx;
      line-height: 20rpx;
      padding: 16rpx 20rpx;
      font-size: 20rpx;
      letter-spacing: -1rpx;
      font-weight: 400;
      color: var(--color-333);
      box-sizing: content-box;
      &.text-small {
        font-size: 16rpx;
      }
      &.ellipsis {
        font-size: 16rpx;
        @extend .oneEllipsis;
      }
    }
    :deep(.nw-button) {
      height: 40rpx;
      margin: 0 16rpx 16rpx;
      border-radius: 12rpx;
      box-sizing: border-box;
      .u-button__text {
        font-size: 22rpx !important;
        font-weight: 400;
      }
      &:not(.u-button--disabled) .u-button__text {
        color: var(--color-fff);
      }
    }
  }
}

.items {
  padding: 20rpx;
  .item {
    display: flex;
    align-items: center;
    padding: 16rpx 22rpx 16rpx 16rpx;
    border-radius: 18rpx;
    background-color: var(--bg-color);
    box-sizing: border-box;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(6, 29, 23, 0.03);
    + .item {
      margin-top: 12rpx;
    }
    .recipe-img {
      flex-shrink: 0;
      width: 138rpx;
      height: 138rpx;
      background-color: var(--body-theme);
      border-radius: 14rpx;
    }
    .item-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 26rpx;
      .ic-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .ic-name {
          line-height: 24rpx;
          word-wrap: break-word;
          word-break: break-all;
          white-space: pre-wrap;
          font-size: 24rpx;
          font-weight: 400;
          color: var(--color-000);
        }
        .ic-operator {
          flex-shrink: 0;
          line-height: 18rpx;
          margin-left: 14rpx;
          font-size: 18rpx;
          font-weight: 400;
          color: var(--color-000);
        }
      }
      .ic-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20rpx;
      }
      .ici-item {
        display: flex;
        align-items: center;
        .ic-label {
          flex-shrink: 0;
          line-height: 18rpx;
          font-size: 18rpx;
          font-weight: 400;
          color: var(--color-999);
        }
        .ic-value {
          line-height: 18rpx;
          font-size: 18rpx;
          font-weight: 400;
          color: var(--color-999);
        }
      }
    }
    .item-right {
      margin-left: 78rpx;
      :deep(.nw-button) {
        min-width: initial;
        height: 54rpx;
        padding-left: 10rpx;
        padding-right: 10rpx;
        border-radius: 28rpx;
        box-sizing: border-box;
        .u-button__text {
          font-size: 22rpx !important;
        }
        &:not(.u-button--disabled) .u-button__text {
          color: var(--color-fff);
        }
      }
    }
  }
}
</style>
